tool-bar-component{
    display: block;
}
.tool-bar {
    background-color: #f5f5f5;
    border: solid 1px #e8e8e8;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14);
}

.tool-bar .sorts,
.tool-bar .pages {
    margin: 0px;
    padding: 0px;
    float: left;
    line-height: 39px;
}

.tool-bar .sorts li,
.tool-bar .pages li {
    float: left;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.tool-bar .sorts li.item>a,
.tool-bar .pages li.item>a {
    float: left;
    display: block;
    height: 39px;

    margin-left: -1px;
    padding: 0 19px;
    border-left: solid 1px #f5f5f5;
    border-right: solid 1px #f5f5f5;
    text-decoration: none;
    color: #6d6d6d;
}
.tool-bar .sorts li.item>a>i.fa{
    line-height: 39px;
    padding-left: 3px;
}

.tool-bar .sorts a.model-dropdown i.fa {
    padding-left: 4px;
}
.tool-bar .sorts li.active.item{
    overflow: inherit;
}
.tool-bar .sorts li.item a:hover,.tool-bar .sorts li.active.item>a ,.tool-bar .sorts li.active li.active>a {
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-color: #e5e5e5;
    color: #f50;

}


/*dropdown*/
.tool-bar .dropdown-content{
    margin: 0px;
    left: 0px;
    top: 39px;
    display: inline-block;
    opacity: 0;
    z-index: -9;
}
.tool-bar .dropdown-content li{
    min-height: 39px;
}

.tool-bar .dropdown-content li a{
    padding: 9px 12px;
}

.tool-bar .show .dropdown-content{
  
    opacity: 1;
    top: 0;
    z-index: 40;
    transition: all 0.3s;
}

.tool-bar .dropdown-content li.disabled{
    display: none!important;
}

.tool-bar .dropdown-content li>a, .dropdown-content li>span{
    font-size: 12px;
}